<style>
  svg#clouds {
    position: fixed;
    bottom: -160px;
    left: -230px;
    z-index: -10;
    width: 1920px;
  }
</style>

<div *ngIf="windowVisible" class="blackout"></div>

<div class="content" role="main">
  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
  </svg>
</div>



<router-outlet></router-outlet>

<p-confirmDialog #cd [style]="{width: '50vw'}" [baseZIndex]="10000" rejectButtonStyleClass="p-button-text">
  <ng-template pTemplate="header">
    <h3 *ngIf="taskAction == 0">Удаление {{(isActive ? "текущего" : "выполненного")}} задания №{{task_id}}</h3>
    <h3 *ngIf="taskAction == 1">Вернуть задание №{{task_id}} в текущие?</h3>
  </ng-template>
  <ng-template pTemplate="footer">
    <button *ngIf="taskAction == 0" class="p-button-danger" type="button" pButton icon="pi pi-check" label="Да" (click)="cd.accept()"></button>
    <button *ngIf="taskAction == 1" class="p-button-warning" type="button" pButton icon="pi pi-check" label="Да" (click)="cd.accept()"></button>
    <button class="p-button" type="button" pButton icon="pi pi-times" label="Нет" (click)="cd.reject()"></button>
  </ng-template>
</p-confirmDialog>

<app-header [userName]="userName" [windowVisible] = "windowVisible" [windowType] = "windowType"
            (outPage)="GetPageFromChild($event)" #appHeaderElement
            (openCreate)="setWindow($event)"></app-header>


<p-table [value]="tasks" [ngStyle] = "{'top':headerHeight}" [scrollable]="true"
         scrollHeight="625px"  [tableStyle]="{'min-width': '50rem'}"
         (onSort)="sortAndSave($event)" [customSort]="true" [lazy]="true">
  <ng-template pTemplate="header">
    <tr class="tr header" id="trHeader">
      <th class="t1">№</th>
      <th class="t2" pSortableColumn="taskStartDate"><b>Дата Начала</b><p-sortIcon field="taskStartDate"></p-sortIcon>
      </th>
      <th class="t3" pSortableColumn="taskName"><b>Задача</b><p-sortIcon field="taskName"></p-sortIcon>
      </th>
      <th class="t4" pSortableColumn="taskEndDate" *ngIf="currentPage==1"><b>Дедлайн</b><p-sortIcon field="taskEndDate"></p-sortIcon>
      </th>
      <th class="t4" pSortableColumn="taskCompleteDate" *ngIf="currentPage==2"><b>Выполнено</b><p-sortIcon field="taskCompleteDate"></p-sortIcon>
      </th>
      <th class="t5" pSortableColumn="taskProgress"><b>Прочее</b><p-sortIcon field="taskProgress"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template id="trBody" pTemplate="body" let-task>
    <tr class="tr" [ngClass]="{'expired': setColor(task)['isExpired'] == true,
                              'complete': task.taskIsComplete}"  *ngIf="setColor(task)['isShowable']">
      <td class="t1">{{task.taskId}}</td>
      <td class="t2">{{task.taskStartDate | MyDateNS}}</td>
      <td class="t3">{{task.taskName}}</td>
      <td class="t4" *ngIf="!task.taskIsComplete">{{task.taskEndDate | MyDateNS}}</td>
      <td class="t4" *ngIf="task.taskIsComplete">{{task.taskCompleteDate | MyDateNS}}</td>
      <td class="t5">
        <button *ngIf="task.taskId != 1" (click)="dragTask(task.taskId, task.taskIsComplete, 1)" pButton pRipple type="button" class="p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-angle-up"></i>
        </button>
        <button *ngIf="(task.taskId != this.incTasks.length && currentPage == 1)
        || (task.taskId != this.cTasks.length && currentPage == 2)"
                (click)="dragTask(task.taskId, task.taskIsComplete, 0)" pButton pRipple type="button" class="p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-angle-down"></i>
        </button>
        <button *ngIf="!task.taskIsComplete"  pButton pRipple type="button" (click)="openWindow(true, 'edit', task.taskId)"  class="p-button-help p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-file-edit"></i>
        </button>
        <button *ngIf="task.taskIsComplete"  pButton pRipple type="button" (click)="openWindow(true, 'editC', task.taskId)"  class="p-button-help p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-file-edit"></i>
        </button>
        <button *ngIf="!task.taskIsComplete" (click)="openWindow(true, 'comp', task.taskId)" pButton pRipple type="button" class="p-button-success p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-check-circle"></i>
        </button>
        <button *ngIf="task.taskIsComplete" (click)="confirmReturn(task.taskId)" pButton pRipple type="button" class="p-button-warning p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-undo"></i>
        </button>
        <button (click)="confirmDelete(task.taskId, task.id, task.taskIsComplete)" pButton pRipple type="button" class="p-button-danger p-button-rounded p-button-sm p-button-raised">
          <i class="pi pi-times-circle"></i>
        </button>
      </td>
    </tr>
    <div pRipple class="progressBar" *ngIf="!task.taskIsComplete && setColor(task)['isShowable']" [ngStyle] = "{'background-color' : setColor(task)['thisColor'],
   'width' : setColor(task)['thisWidth']}" ><div class="pHold">{{setColor(task)['thisWidth']}}</div>
    </div>
  </ng-template>
</p-table>



<app-time-gui></app-time-gui>

<app-new-window *ngIf="windowVisible" #appNewWindow [WHHeight] = "WHHeight"
                [tasks] = "tasks" [cTasks] = "cTasks" [incTasks] = "incTasks"
                [windowVisible] = "windowVisible" [windowType] = "windowType"
                [task_id] = "task_id" (closeWindowThis)="setWindow($event)"
                (updateTasks) = "onUpdate()" (addDeleteInfo) = "completeTsk($event)">
</app-new-window>


<div class="placeholder" [ngStyle]="{'height':'150px'}"></div>

